<template>
  <div id="rights-container">
    <h2 class="rights-title">权限管理</h2>
    <div class="rights-nav">
      <el-tag>角色管理</el-tag>
      <el-tag closable @close="closeTag" v-show="isShowTag">权限设定</el-tag>
    </div>
    <div class="rights-table" v-if="!isShowTag">
      <el-button class="addRole" @click="showAddRole">增加角色</el-button>
      <el-table :data="tableData" :stripe="true" border style="width: 100%">
        <el-table-column align="center" label="序号" width="100">
          <template slot-scope="scope">{{ scope.$index + 1 }}</template>
        </el-table-column>
        <el-table-column prop="name" align="center" label="角色名称" width="160"></el-table-column>
        <el-table-column prop="description" align="center" label="角色描述"></el-table-column>
        <el-table-column label="操作" width="260" align="center">
          <template slot-scope="scope">
            <el-button type="primary" @click="setLimit(scope.row)" size="mini">设置权限</el-button>
            <el-button type="info" @click="editRole(scope.row)" size="mini">编辑</el-button>
            <el-button type="danger" @click="delRole(scope.row.id)" size="mini">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="rights-roleForm" v-else>
      <AddRoleForm
        @closeTag="closeTag"
        :roleForm="roleForm"
        :dailogType="dailogType"
        :choiceData="choiceData"
      />
    </div>
    <RoleDailog
      v-if="isShowDailog"
      :type="dailogType"
      :choiceData="choiceData"
      @onCancel="_onCancelDailog"
    />
  </div>
</template>

<script>
import {
  getRoleList,
  delTheRole,
  getRolePermission
} from "@/http/rootSetApi.js";
import AddRoleForm from "./AddRoleForm.vue";
import RoleDailog from "./RoleDailog.vue";

export default {
  name: "RightsManagementHome",
  components: {
    AddRoleForm,
    RoleDailog
  },
  data() {
    return {
      isShowTag: false, // 是否显示tag标签 和 角色表单组件
      tableData: [
        {
          id: 1,
          name: "销售组",
          description: "销售组成员可以进行销售、退货及库存查询操作",
          data: [1, 2, 3, 4, 5]
        }
      ],
      roleForm: {
        id: "",
        name: "",
        description: "",
        data: []
      },
      isShowDailog: false,
      dailogType: "",
      choiceData: null
    };
  },
  created() {
    this.initDataList();
  },
  methods: {
    closeTag() {
      this.isShowTag = false;
      this.choiceData = null;
    },
    setLimit(item) {
      this.choiceData = item;
      console.log(this.choiceData);
      getRolePermission(item.id)
        .then(res => {
          console.log(res);
          this.choiceData.data = res.data.data;
          this.isShowTag = true;
        })
        .catch(err => {
          console.log(err);
        });
    },
    _onCancelDailog({ type, form }) {
      this.isShowDailog = false;
      this.choiceData = null;
      if (type == "add") {
        Object.assign(this.roleForm, form);
        this.choiceData = this.roleForm;
        this.isShowTag = true;
      }
      this.initDataList();
    },
    showAddRole() {
      this.dailogType = "add";
      this.isShowDailog = true;
    },
    // 修改角色
    editRole(item) {
      this.dailogType = "edit";
      this.choiceData = item;
      this.isShowDailog = true;
    },
    // 删除角色
    delRole(id) {
      this.$confirm("此操作将永久删除该角色, 是否继续?", "删除角色", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          delTheRole(id)
            .then(res => {
              if (res.status === 200) {
                this.initDataList();
                this.$message({
                  message: res.data.msg,
                  type: "success"
                });
              }
            })
            .catch(err => {
              console.log(err);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    // 初始化数据
    initDataList() {
      getRoleList()
        .then(res => {
          this.tableData = res.data.data;
        })
        .catch(err => {
          console.log(err);
        });
    }
  }
};
</script>

<style scoped lang="scss">
#rights-container {
  .rights-title {
    padding: 10px 20px;
    border-bottom: 1px solid #333;
  }
  .rights-nav {
    background: #eee;
    padding: 15px 20px 5px;
  }
  .rights-table {
    width: 1200px;
    height: 540px;
    overflow-y: auto;
    margin: 50px auto;
    padding: 10px;
    box-shadow: 0 0 4px #ccc;
    .addRole {
      margin-bottom: 10px;
    }
  }
}
</style>